
import { PlusOutlined } from '@ant-design/icons';
import { Button, message, Input, Drawer } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import {useIntl, FormattedMessage, history} from 'umi';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {ProFormText, ProFormTextArea } from '@ant-design/pro-form';
import {resolve} from '@/services/doa/irs'
import ReactJson from 'react-json-view'
import ProForm from '@ant-design/pro-form'

const IdResolution = () => {


  const doRef = useRef();
  const repoRef = useRef();
  const [doi,setDoi] = useState("")
  const [repoDoi,setRepoDoi] = useState("")
  const [doInfo,setDoInfo] = useState([])
  const [repoInfo,setRepoInfo] = useState([])

  const transformData = (source) => {
    const data = []
    for (const key in source) {
      data.push({key: key, value: source[key], 'index': source.index})
    }
    console.log(data)
    return data
  }


  useEffect(()=>{
    if(history.location?.query?.doi)
      setDoi(history.location?.query?.doi)
  },[])

  useEffect(()=>{
    if(doi == null || doi === "" || doi === "null")
      return
    resolve({doi:doi}).then((res) =>{
      if(!res.success){
        return
      }
      if(res.data === "null" || res.data == null)
        return
      const digitalObject = JSON.parse(res.data)
      console.log(digitalObject)
      const handleValues = digitalObject.handleValues

      setRepoDoi(handleValues?.repository)
      setDoInfo(transformData(handleValues))
    })
  },[doi])

  useEffect(()=>{
    console.log("update the do table")
    doRef.current.reloadAndRest()

    console.log("update the repo table")

  },[doInfo])

  useEffect(()=>{
    if(repoDoi == null || repoDoi === "" || repoDoi === "null")
      return
    resolve({doi:repoDoi}).then((res) =>{
      if(!res.success){
        return
      }
      if(res.data === "null" || res.data == null)
        return
      const digitalObject = JSON.parse(res.data)
      console.log(digitalObject)
      const handleValues = digitalObject.handleValues
      setRepoInfo(transformData(handleValues))
    })
  },[repoDoi])

  useEffect(()=>{
    repoRef.current.reloadAndRest()
  },[repoInfo])



  /**
   * @en-US International configuration
   * @zh-CN 国际化配置
   * */

  const intl = useIntl();

  const columns = [
    {
      dataIndex: 'key',
      title: '类型/Type',
    },
    {
      dataIndex: 'index',
      title: '索引/Index',
    },
    {
      dataIndex: 'value',
      title: '值/Value',
    }
  ];


  return (
    <PageContainer>
      <ProForm
        layout="inline"
        onFinish={async (values) => {
          console.log(values);
          setDoi(values.doi)
        }}
        style={{"margin-bottom": "20px"}}
      >
        <ProFormText width="md" placeholder="请输入数字对象标识" name="doi" label="doi" id='pages.DOA.searchTable.search' />
      </ProForm>
      <ProTable
        headerTitle={intl.formatMessage({
          id: 'pages.irs.doTable.title',
          defaultMessage: '标识解析结果',
        })}
        style={{"margin-bottom": "20px"}}
        actionRef={doRef}
        rowKey="key"
        search={false}
        pagination={false}
        toolBarRender={() => [

        ]}
        request={async (params, sort, filter) => {
          return Promise.resolve({
            data: doInfo,
            success: true,
          });
        }}
        columns={columns}
      />


      <ProTable
        headerTitle={intl.formatMessage({
          id: 'pages.irs.repoTable.title',
          defaultMessage: '所在repo解析结果',
        })}
        actionRef={repoRef}
        rowKey="key"
        search={false}
        pagination={false}
        toolBarRender={() => [

        ]}
        request={async (params, sort, filter) => {
          return Promise.resolve({
            data: repoInfo,
            success: true,
          });
        }}
        columns={columns}
      />


    </PageContainer>
  );
};

export default IdResolution;

